<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'Css3BorderBox'
  })
</script>
<template>
  <div class="panel w-full h-full">
    <div class="box w-full h-full">
      <!-- 示例 div -->
      <div class="border-box"></div>
    </div>
    <div class="box w-full h-full"></div>
  </div>
</template>
<style lang="scss" scoped>
  .panel {
    -webkit-overflow-scrolling: touch;
    flex-direction: column;

    scroll-snap-type: y mandatory;
  }
  .box {
    display: flex;
    align-items: center;
    justify-content: center;

    scroll-snap-align: start;
  }
  .border-box {
    position: relative;
    z-index: 0;

    overflow: hidden;

    width: 400px;
    height: 300px;
    padding: 2rem;

    border-radius: 10px;

    &::before {
      position: absolute;
      z-index: -2;
      top: -50%;
      left: -50%;

      width: 200%;
      height: 200%;

      content: '';
      animation: rotate 4s linear infinite;

      background-color: #399953;
      background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300),
        linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
      background-repeat: no-repeat;
      background-position:
        0 0,
        100% 0,
        100% 100%,
        0 100%;
      background-size:
        50% 50%,
        50% 50%;
    }

    &::after {
      position: absolute;
      z-index: -1;
      top: 6px;
      left: 6px;

      width: calc(100% - 12px);
      height: calc(100% - 12px);

      content: '';
      animation: opacityChange 3s infinite alternate;

      border-radius: 5px;
      background: white;
    }
  }
  @keyframes rotate {
    100% {
      transform: rotate(1turn);
    }
  }
  @keyframes opacityChange {
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0.5;
    }
  }
</style>
